

// 自定义封装Swiper 
import Swiper from "swiper"
// import "swiper/dist/css/swiper.min.css";  // bug 
import PropTypes from "prop-types"
export default class MySwipe extends Component{
  render(){
    const {id} = this.props
    return (
      <div className="swiper-container" id={id} >
        <div className="swiper-wrapper">
          {/* <div className="swiper-slide"></div> */}
          {/* <slot></slot> */}
           {this.props.children}
        </div>
      </div>
    )
  }

  componentDidMount(){
    // 实例化 
    const {id,options} = this.props; 
    var myswiper = new Swiper("#"+id,options)
  }
}

MySwipe.defaultProps = {
  id:"myid",
  options:{  // 轮播属性参数
    loop:true,
    autoplay:true,
    speed:3000, 
    observer:true // 重新实例化
  }
}

MySwipe.propTypes = {
  id:PropTypes.string,
  options:PropTypes.object 
}

// 静态属性 
MySwipe.Item = ({children})=>{
  return (
    <div className="swiper-slide">
      {children}
    </div>
  )
}